﻿<%@ Control Language="c#"  Inherits="Web.Control.Member.widgets.badges" %>
<div class="common">
	<div id="new_body">
		<div id="body_900">
			<div id="body_left"></div>
			<div id="body_main">
				<div id="Title">
					<div class="h1"><%=GetText("M0030")%></div>
				</div>
				<div>
					<ul class="sort_sel">
						<li class="selATags first" onclick="SortList(1,this)" style="float:left"><span><a href="/widgets/badges.htm"><%=GetText("M0031")%></a></span></li>
						<li class="unselATags" onclick="SortList(2,this)" style="float:left"><span><a href="/widgets/fbapp.htm"><%=GetText("M0032")%></a></span></li>
					</ul>	
					<div class="clear"></div>
				</div>
				<div class="Center9001n">
					<div class="Center9001Left">
						<div class="right_layerA">
							<div class="layer_contentA">
								<h4>What is a badge?</h4>
								<div class="layer_contentA5">Badges are a customizable way to share your italki information on other web sites. Put your badge on a site and it will be automatically updated and visible to anyone.</div>
							</div>
						</div>
					</div>
					<div class="Center9001Right">
						<div class="Center9001content">
							<div class="widgets_area">
								<h3><%=GetText("M0031")%></h3>
								<div>
									<div class="margin5">
										<div class="floatl" style="width:60%">
											<div class="margin5"><strong>Network Badge (Large)</strong><br />Spread the word! Get an italki badge to tell the world what language you're studying.  Add the badge to your social network profile, website or blog.<br />The size: 200 x 80 px</div>
											<div class="margin5">
												<strong>Choose a language you're learning</strong><br /><select class="common180" id="sletla" onchange="getlangue()"><%=GetLanguageSelect(uls.TargetLanguage)%></select>
											</div>
											<div class="margin5"><strong>HTML Embed Code:</strong></div>
											<div class="margin5"><input type="text" class="common300" id="txtCopyimg" value="<a href='http://www.italki.com/<%=uls.MemberNo%>.htm' target='_blank'><img src='http://www.italki.com/Images/badges/badges_<%=uls.TargetLanguage %>_300.gif' border='0'></a>" /></div>
											<div class="margin5"><input type="button" onclick='CopyText("txtCopyimg")' value="Copy HTML Code" class="buttong" /></div>
										</div>
										<div class="floatr" style="width:35%; text-align:center"><img id="imcopy" src="/Images/badges/badges_<%=uls.TargetLanguage %>_300.gif" /></div>
										<div class="clear"></div>
									</div>
								</div>
								<div class="margin20">
									<div>
										<div class="margin5">
											<div class="floatl" style="width:60%">
												<div class="margin5"><strong>Network Badge (Small)</strong><br />Spread the word! Get an italki badge to tell the world what language you're studying.  Add the badge to your social network profile, website or blog.<br />The size: 130 x 16 px</div>
												<div class="margin5"><strong>HTML Embed Code:</strong></div>
												<div class="margin5"><input type="text" class="common300" id="txtCopyimg2" value="<a href='http://www.italki.com/<%=uls.MemberNo%>.htm' target='_blank'><img src='http://www.italki.com/Images/badges/badges_1301.gif' border='0'></a>" /></div>
												<div class="margin5"><input type="button" onclick='CopyText("txtCopyimg2")' value="Copy HTML Code" class="buttong" /></div>
											</div>
											<div class="floatr" style="width:35%; text-align:center">
											<table width="100%" border="0">
												  <tr>
													<td width="50%" height="50" align="center"><img src="/Images/badges/badges_1301.gif"  /><br />
													  <input name="image" type="radio" value="1"  checked="checked" onclick="Getimage(this.value)"/></td>
													</tr>
												  <tr>
													<td width="50%" height="50" align="center"><img src="/Images/badges/badges_1304.gif" /><br />
														<input name="image" type="radio" value="4" onclick="Getimage(this.value)"/></td>
													</tr>
												  <tr>
													<td width="50%" height="50" align="center"><img src="/Images/badges/badges_1302.gif" /><br />
													  <input name="image" type="radio" value="2" onclick="Getimage(this.value)"/></td>
													</tr>
												  <tr>
													<td width="50%" height="50" align="center"><img src="/Images/badges/badges_1303.gif"  /><br />
														<input name="image" type="radio" value="3" onclick="Getimage(this.value)" /></td>
													</tr>
												</table>
												</div>
											<div class="clear"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="Clear"></div>
				</div>
			</div>
			<div id="body_right"></div>
			<div class="clear"></div>
		</div>
		<div id="body_900F"></div>
	</div>
</div>
<script>
var memberno="<%=uls.MemberNo%>";
function getlangue()
{
    document.getElementById("txtCopyimg").value="<a href='http://www.italki.com/"+memberno+".htm'><img src='http://www.italki.com/Images/badges/badges_"+document.getElementById('sletla').value+"_300.gif'>/</a>";
    document.getElementById("imcopy").src="/Images/badges/badges_"+$get('sletla').value+"_300.gif";
}
function Getimage(val)
{
   document.getElementById("txtCopyimg2").value="<a href='http://www.italki.com/"+memberno+".htm'><img src='http://www.italki.com/Images/badges/badges_130"+val+".gif' /></a>";
}
function CopyText(id)
{
    copy(document.getElementById(id).value);
}
function copy(text2copy) 
{
    if (window.clipboardData) 
    {   
        window.clipboardData.setData("Text",text2copy);   
    } 
    else 
    {   
        var flashcopier = 'flashcopier';
        if(!document.getElementById(flashcopier)) 
        {
            var divholder = document.createElement('div');
            divholder.id = flashcopier;
            document.body.appendChild(divholder);
        }
        document.getElementById(flashcopier).innerHTML = '';
        var divinfo = '<embed src="/images/_clipboard.swf" FlashVars="clipboard='+escape(text2copy)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
        document.getElementById(flashcopier).innerHTML = divinfo;
    }
}
</script>